<template>
	<view class="mnemonic l-whitespace">
		<view class="iconfont iconluobu"></view>
		<view class="mnemonic-title">验证助记词</view>
		<view class="mnemonic-content">请按顺序点击助记词，以确认您的备份助记词正确。</view>
		<view class="mnemonic-pwd">
			<van-cell-group>
				<van-field 
				type="password" 
				placeholder="请输入6位数字交易密码" 
				clearable
				:maxlength="6"
				:error-message="verifyPwd"
				@change="cPwd" />
				<van-field
					type="password"
					placeholder="确认交易密码"
					:border="false"
					clearable
					:maxlength="6"
					@change="cPwd2"
				/>
			</van-cell-group>
		</view>
		<view class="mnemonic-code">
			<block v-for="(key, index) in codes" :key="index">
				<view class="mnemonic-code-item">{{ key }}</view>
			</block>
		</view>
		<view class="reset" v-if="codes.length > 0" @tap="onReset">重置</view>
		<view class="mnemonic-codeItem">
			<block v-for="(key, index) in codes2" :key="index">
				<view class="item" @click="onCode(key, index)">{{ key }}</view>
			</block>
		</view>
		<view class="mnemonic-btn" :class="{ active: active }" @tap="onSubmit" hover-class="btn-hover">验证</view>
	</view>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';
import * as reg from '../../../common/utils/reg.js';
export default {
	data() {
		return {
			active: false,
			phone: '',
			from: {
				codes: [],
				payPassword: '',
				payPassword2: '',
			},
			verifyPwd: '交易密码格式为6位数字',
			codes: [],
			codes2: [],
			codes3: []
		};
	},
	onLoad (key) {
		this.phone = key.phone
	},
	onShow() {
		this.mnemonic.forEach((e, index) => {
			this.$set(this.codes2, index, e)
			this.$set(this.codes3, index, e)
		})
	},
	watch: {
		codes2(val) {
			this.active = val.length === 0 ? true : false;
		}
	},
	computed: {
		...mapGetters({
			mnemonic: 'getMnemonic'
		})
	},
	methods: {
		...mapActions([
				'setUserInfo'
			]),
		onSubmit() {
			if (!this.active) return
			const regSubmit = reg.regSubmit(this.from)
			if (regSubmit) {
				uni.showToast({
					title: regSubmit, 
					icon: 'none'
				});
				return
			}
			this.verifyMnemonic()
		},
		verifyMnemonic() {
			uni.showLoading({
				title: ''
			});
			this.$http
				.verifyMnemonic({
					tel: this.phone,
					word: this.codes.join(' ')
				})
				.then(e => {
					if (e.data.msg === 'ok') {
						this.verifyRegisterMnemonic();
						return
					}
					uni.showToast({
						title: e.data.msg, 
						icon: 'none'
					});
					uni.hideLoading()
				});
		},
		verifyRegisterMnemonic() {
			this.$http
				.verifyRegisterMnemonic({
					tel: this.phone,
					jypwd: this.from.payPassword
				})
				.then(e => {
					uni.hideLoading()
					if (e.data.msg.toLowerCase() === 'ok') {
						uni.showToast({
							title: '验证成功', 
							icon: 'none'
						});
						e.data.data.head = this.imgUrl + e.data.data.head
						this.setUserInfo(e.data.data).then(e => {
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/wallet/index'
								});
							}, 500)
						})
						return
					}
					uni.showToast({
						title: e.data.msg, 
						icon: 'none'
					});
				});
		},
		onCode(key, index) {
			this.codes.push(key);
			this.$delete(this.codes2, index);
		},
		onReset() {
			let arr = this.codes3;
			this.codes = [];
			arr.forEach((e, index) => {
				this.$set(this.codes2, index, e);
			});
		},
		cPwd(e) {
			this.from.payPassword = e.detail;
			this.verifyPwd = reg.regPayPassword(e.detail)
		},
		cPwd2(e) {
			this.from.payPassword2 = e.detail;
		}
	}
};
</script>

<style scoped lang="scss">
@import '../../../common/mnemonic.scss'
</style>
